/**
 * 页面：常见问题（FAQ）
 * 功能：汇总高频问题与解决方案，支持关键词搜索与折叠查看
 * 技术栈：Ant Design 的 Typography / Collapse / Card / Input 组合布局
 */
import React from 'react'
import { Typography, Collapse, Card, theme, Input, Row, Col, Divider } from 'antd'

const { Title, Paragraph, Text, Link } = Typography

function Faq() {
  const { token } = theme.useToken()
  const cardStyle: React.CSSProperties = {
    background: 'transparent',
    border: `1px solid ${token.colorBorder}`,
    borderRadius: 12,
  }

  const items = [
    {
      key: '1',
      label: '如何切换明亮/暗色主题？',
      children: <Paragraph>进入 <Text code>系统设置 → 偏好设置</Text>，在“主题风格”下拉中选择 <Text strong>明亮</Text> 或 <Text strong>暗色</Text> 并保存。页面将自动应用。</Paragraph>,
    },
    {
      key: '2',
      label: '如何修改主题主色、语言等偏好？',
      children: <Paragraph>在 <Text code>系统设置 → 偏好设置</Text> 中分别设置“主题主色”和“界面语言”，保存后会在全局生效。</Paragraph>,
    },
    {
      key: '3',
      label: '如何创建第一个项目/内容？',
      children: <Paragraph>进入首页的“AI工具”或工作台，根据向导创建条目；也可在“可视大屏/AI智能”等页面中从模板开始。</Paragraph>,
    },
    {
      key: '4',
      label: '账号或权限问题如何处理？',
      children: <Paragraph>请联系系统管理员为你的账号分配相应角色与权限，或在“后端管理”中查看当前角色权限说明。</Paragraph>,
    },
  ]

  return (
    <div style={{ padding: 16 }}>
      <Title level={3} style={{ marginBottom: 8 }}>常见问题</Title>
      <Paragraph type="secondary" style={{ marginBottom: 16 }}>
        汇总高频问题与解决方案，支持按关键词搜索。
      </Paragraph>

      <Row gutter={[16, 16]}>
        <Col xs={24} md={16}>
          <Card bordered style={cardStyle}>
            <Input.Search placeholder="搜索关键词，如：主题、语言、权限" allowClear style={{ marginBottom: 12 }} />
            <Collapse items={items} bordered={false} style={{ background: 'transparent' }} />
          </Card>
        </Col>
        <Col xs={24} md={8}>
          <Card title="获取支持" bordered style={cardStyle}>
            <Paragraph>
              - 查看 <Text code>知识中心 → 使用指南</Text> 了解完整操作流程。
            </Paragraph>
            <Paragraph>
              - 如果仍未解决，请联系管理员或提交工单。
            </Paragraph>
          </Card>
        </Col>
      </Row>

      <Divider style={{ margin: '16px 0' }} />
      <Paragraph type="secondary">以上内容会持续更新，欢迎反馈新的问题与建议。</Paragraph>
    </div>
  )
}

export default Faq
